<template>
  <div class="padding flex height-100 content-with-tree">
    <div class="flex direction-column height-100 right-content">
      <div class="search-form">
        <el-form inline>
          <el-form-item label="所属区域">
            <area-picker v-model="qs.district"></area-picker>
          </el-form-item>
          <el-form-item label="月份选择">
            <el-date-picker
              v-model="qs.month"
              type="month"
              format="yyyy-MM"
              value-format="yyyy-MM"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="上报状态">
            <dictionary-picker
              dic-code="SHANG_BAO_ZHUANG_TAI"
              v-model="qs.status"
            ></dictionary-picker>
          </el-form-item>
          <el-form-item label="所属行业">
            <industry-picker v-model="qs.industry"></industry-picker>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input v-model="qs.keyword" placeholder="企业名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        v-loading="loading"
        :data="lists"
        height="100%"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          v-bind="column"
        >
          <template v-if="column.prop === 'enterprise'" #default="{ row }">
            <el-link
              :underline="false"
              type="primary"
              @click="navigateToEnterpriseAnalysis(row, 'enterpriseCode')"
            >
              {{ row.enterprise }}
            </el-link>
          </template>
          <!--          <template v-if="column.prop === 'operation'" #default="{ row }">-->
          <!--            <el-tag class="margin-left-5" v-for="(item, index) in row[column.prop]" :key="index">{{ item }}</el-tag>-->
          <!--          </template>-->
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        layout="total,prev,pager,next"
        hide-on-single-page
        background
        :current-page.sync="pagination.pageNumber"
        :page-size="pagination.pageSize"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import AreaPicker from '@/components/area-picker';
import DictionaryPicker from '@/components/dictionary-picker';
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis';
import IndustryPicker from '@/components/industry-picker';

export default {
  name: 'report-audit',
  mixins: [Navigate2enterpriseAnalysis],
  components: { IndustryPicker, DictionaryPicker, AreaPicker },
  data() {
    return {
      qs: {
        month: '',
        district: '',
        status: '',
        industry: '',
        keyword: ''
      },
      loading: false,
      lists: [],
      columns: [
        {
          label: '企业名称',
          prop: 'enterprise'
        },
        {
          label: '经营状态',
          prop: 'businessStatus'
        },
        {
          label: '上报状态',
          prop: 'reportStatus'
        }
        // {
        //   label: '操作',
        //   prop: 'operation'
        // },
      ],
      pagination: {
        pagNumber: 1,
        pageSize: 13,
        total: 0
      }
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.user.theme;
    },
    energyEnterpriseList() {
      return this.$store.state.energyEnterpriseList;
    }
  },
  watch: {
    energyEnterpriseList: {
      deep: true,
      handler() {
        this.getLists();
      }
    }
  },
  mounted() {
    this.$store.dispatch('GET_ENTERPRISE_LIST');
    this.getLists();
  },
  methods: {
    getLists() {
      this.loading = true;
      // TODO
      return new Promise(resolve => {
        setTimeout(() => {
          resolve();
          this.lists = this.energyEnterpriseList.map(v => ({
            id: v.id,
            enterprise: v.name,
            businessStatus: '生产',
            reportStatus: '全部上报',
            operation: ['查看', '历史操作', '智能数据校验']
          }));
          this.loading = false;
        }, 300);
      });
    },
    onNodeClick() {
      this.onSearch();
    },
    onSearch() {
      this.pagination.pagNumber = 1;
      this.$nextTick(() => {
        this.getLists();
      });
    }
  }
};
</script>

<style scoped></style>
